<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  header  -->
    <div class="header">
      <span class="popup-name">{{ currentNode.name }}</span>
      <a-icon class="close-btn" type="close" @click="$emit('done')" />
    </div>
    <!--  body  -->
    <div class="description">
      <!-- 关联关系 -->
      <a-radio-group v-model="mod" class="mode-radio-group">
        <a-radio :value="1" class="mode-radio">UNION</a-radio>
        <a-radio :value="2" class="mode-radio">UNION ALL</a-radio>
      </a-radio-group>
      <div class="table-name-tips">
        <div class="table-name">
          <a-tooltip placement="top">
            <template slot="title">
              <span>
                节点名称：{{ currentNode.data.input[0].nodeName }}
                <br />
                表名：{{ currentNode.data.input[0].tableName }}
              </span>
            </template>
            <span class="name-text">
              {{ currentNode.data.input[0].nodeName }}
            </span>
          </a-tooltip>
        </div>
        <div class="table-name">
          <a-tooltip placement="top">
            <template slot="title">
              <span>
                节点名称：{{ currentNode.data.input[1].nodeName }}
                <br />
                表名：{{ currentNode.data.input[1].tableName }}
              </span>
            </template>
            <span class="name-text">
              {{ currentNode.data.input[1].nodeName }}
            </span>
          </a-tooltip>
        </div>
      </div>
      <div
        v-if="
          currentNode.data.input.length > 0 &&
          left.length > 0 &&
          right.length > 0
        "
        class="incidence-all"
      >
        <!-- 左表 节点 data中input字段中第一张表 -->
        <div class="incidence-all-left incidence-left-right">
          <div
            v-for="(leftItem, idx) in left"
            :key="'left' + idx"
            class="incidence-item-column"
          >
            <a-select v-model="left[idx]" class="incidence-column-select">
              <a-select-option
                v-for="(column1, index) in currentNode.data.input[0].tableCols"
                :key="'column1' + index"
                :value="column1"
                >{{ column1 }}</a-select-option
              >
            </a-select>
            <div class="incidence-line"></div>
          </div>
        </div>
        <!-- 右表 节点 data中input字段中第二张表 -->
        <div class="incidence-all-right incidence-left-right">
          <div
            v-for="(rightItem, idx) in right"
            :key="'right' + idx"
            class="incidence-item-column"
          >
            <a-select v-model="right[idx]" class="incidence-column-select">
              <a-select-option
                v-for="(column2, index) in currentNode.data.input[1].tableCols"
                :key="'column2' + index"
                :value="column2"
                >{{ column2 }}</a-select-option
              >
            </a-select>
            <span class="delete-icon" @click="deleteIncidence(idx)">
              <a-icon-font type="iconicon-beifen5" />
            </span>
          </div>
        </div>
      </div>
      <div v-else class="no-incidence">-- 暂无关联关系，请添加关联 --</div>
      <!--  添加关联关系  -->
      <div
        v-if="currentNode.data.input.length > 0"
        class="add-incidence-relation"
        @click="addIncidenceRelation"
      >
        <a-icon type="plus" />
        添加关联
      </div>
      <div v-else>
        选择父节点
      </div>
    </div>
    <!--  footer  -->
    <div class="buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="$emit('done')">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'

@Component
export default class EtlUnion extends Vue {
  @Prop({
    type: Object,
    default: () => {
      return {}
    },
  })
  currentNode!: any
  // 关联关系
  public incidenceRelation: Array<Array<string>> = [['', '']]
  public mod = 1
  public left: Array<string> = []
  public right: Array<string> = []

  public created() {
    // if(this.currentNode.data.left.length === 0 && this.currentNode.data.right.length === 0) {
    //   // 添加映射关系
    //   this.$message.warning('暂无关联关系， 请添加！')
    // }else {
    this.mod = this.currentNode.data.mod
    this.left = this.currentNode.data.left
    this.right = this.currentNode.data.right
    // }
  }

  public mounted() {
    // (document.querySelector('.overlay') as HTMLDivElement).addEventListener('click', this.closePopup)
  }

  public closePopup() {
    this.$emit('done')
  }

  public deleteIncidence(idx: number) {
    this.left.splice(idx, 1)
    this.right.splice(idx, 1)
  }

  public addIncidenceRelation() {
    // 添加映射关系
    this.left.push('')
    this.right.push('')
  }

  public confirm() {
    let status = true
    this.left.forEach((item: any) => {
      if (item === '') {
        status = false
      }
    })
    this.right.forEach((item: any) => {
      if (item === '') {
        status = false
      }
    })
    if (status) {
      this.$emit('confirm', {
        left: this.left,
        mod: this.mod,
        right: this.right,
      })
    } else {
      this.$message.warning('请填写关联条件')
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/popup/setParams';

.set-params.window {
  height: 500px;
  width: 600px;
}

/* 内容 */
.description {
  font-size: 16px;
  height: calc(100% - 109px);
  overflow-y: auto;
  padding: 12px 24px 0;
  width: 100%;
  /* 模式 */
  .mode-radio-group {
    margin-bottom: 12px;
  }

  /* 表名 */
  .table-name-tips {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    width: 100%;

    .table-name {
      display: flex;
      margin-right: calc(36% - 150px);
      width: 150px;

      .name-text {
        color: #1e49f8;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }
    }
  }
  /* 关联关系 */
  .incidence-all {
    display: flex;
    justify-content: space-between;
    width: 100%;

    /* 左 */
    .incidence-all-left {
      padding-right: 24px;
      width: 64%;

      /* 线 */
      .incidence-line {
        border-bottom: 1px solid #d9d9d9;
        height: 1px;
        margin-left: 24px;
        width: calc(100% - 174px);
      }
    }

    .incidence-all-right {
      width: 36%;
    }

    /* 左右 右 */
    .incidence-left-right {
      display: flex;
      flex-direction: column;

      /* 单选框 */
      .incidence-item-column {
        align-items: center;
        display: flex;
        margin-bottom: 12px;

        .incidence-column-select {
          height: 32px;
          width: 150px;
        }

        /* delete icon */
        .delete-icon {
          cursor: pointer;
          display: inline-block;
          height: 24px;
          line-height: 24px;
          padding-left: 12px;
          width: 28px;
        }
      }
    }
  }

  .no-incidence {
    color: #888;
    font-style: italic;
    height: 40px;
    line-height: 40px;
    margin-bottom: 12px;
    text-align: center;
  }

  /* 添加 */
  .add-incidence-relation {
    border: 1px solid #e9e9e9;
    color: #6973ff;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100%;
  }
}
</style>
